<div class="row">

    <div class="col-sm-4 col-lg-4" id="user-list">
        <h3 class="heading">Users <small>last 24 hours</small></h3>
        <div class="row">
            <div class="col-lg-12">
                <div class="input-group input-group-sm sepH_b">
                    <span class="input-group-addon">
                        <i class="glyphicon glyphicon-user"></i>
                    </span>
                    <input class="user-list-search search form-control input-sm" placeholder="Search user" type="text">
                </div>
                <ul class="nav nav-pills line_sep">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Sort by <b class="caret"></b></a>
                        <ul class="dropdown-menu sort-by">
                            <li><a href="javascript:void(0)" class="sort" data-sort="sl_name">by name</a></li>
                            <li><a href="javascript:void(0)" class="sort" data-sort="sl_status">by status</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Show <b class="caret"></b></a>
                        <ul class="dropdown-menu filter">
                            <li class="active"><a href="javascript:void(0)" id="filter-none">All</a></li>
                            <li><a href="javascript:void(0)" id="filter-online">Online</a></li>
                            <li><a href="javascript:void(0)" id="filter-offline">Offline</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <ul class="list user_list">
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">John Doe</a><br>
                <small class="s_color sl_email">johnd@example1.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Kate Miller</a><br>
                <small class="s_color sl_email">kmiller@example1.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">James Vandenberg</a><br>
                <small class="s_color sl_email">jamesv@example2.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">Donna Doerr</a><br>
                <small class="s_color sl_email">donnad@example3.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">Perry Weitzel</a><br>
                <small class="s_color sl_email">perryw@example2.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Charles Bledsoe</a><br>
                <small class="s_color sl_email">charlesb@example3.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">Wendy Proto</a><br>
                <small class="s_color sl_email">wnedyp@example1.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Nancy Ibrahim</a><br>
                <small class="s_color sl_email">nancyi@example2.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">Eric Cantrell</a><br>
                <small class="s_color sl_email">ericc@example4.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Andre Hill</a><br>
                <small class="s_color sl_email">andreh@example2.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Laura Taggart</a><br>
                <small class="s_color sl_email">laurat@example3.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">Doug Singer</a><br>
                <small class="s_color sl_email">dougs@example2.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Douglas Arnott</a><br>
                <small class="s_color sl_email">douglasa@example1.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">Lauren Henley</a><br>
                <small class="s_color sl_email">laurenh@example3.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">William Jardine</a><br>
                <small class="s_color sl_email">williamj@example4.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Yves Ouellet</a><br>
                <small class="s_color sl_email">yveso@example2.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">John Doe</a><br>
                <small class="s_color sl_email">johnd@example1.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Kate Miller</a><br>
                <small class="s_color sl_email">kmiller@example1.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">James Vandenberg</a><br>
                <small class="s_color sl_email">jamesv@example2.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">Donna Doerr</a><br>
                <small class="s_color sl_email">donnad@example3.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">Perry Weitzel</a><br>
                <small class="s_color sl_email">perryw@example2.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Charles Bledsoe</a><br>
                <small class="s_color sl_email">charlesb@example3.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">Wendy Proto</a><br>
                <small class="s_color sl_email">wnedyp@example1.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Nancy Ibrahim</a><br>
                <small class="s_color sl_email">nancyi@example2.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">Eric Cantrell</a><br>
                <small class="s_color sl_email">ericc@example4.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Andre Hill</a><br>
                <small class="s_color sl_email">andreh@example2.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Laura Taggart</a><br>
                <small class="s_color sl_email">laurat@example3.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">Doug Singer</a><br>
                <small class="s_color sl_email">dougs@example2.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Douglas Arnott</a><br>
                <small class="s_color sl_email">douglasa@example1.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">Lauren Henley</a><br>
                <small class="s_color sl_email">laurenh@example3.com</small>
            </li>
            <li>
                <span class="label label-danger pull-right sl_status">offline</span>
                <a href="#" class="sl_name">William Jardine</a><br>
                <small class="s_color sl_email">williamj@example4.com</small>
            </li>
            <li>
                <span class="label label-success pull-right sl_status">online</span>
                <a href="#" class="sl_name">Yves Ouellet</a><br>
                <small class="s_color sl_email">yveso@example2.com</small>
            </li>
        </ul>
        <ul class="pagination paging bottomPaging"></ul>
    </div>
</div>
